Container Queries
親コンテナのサイズに対して条件分岐して要素のstyleを指定できる
@mediaはviewportサイズに対して指定するが、それの親コンテナ版 この図がわかりやすい
https://gyazo.com/bcb13460dc9d1b83d6f748ae4a06746d https://jtk.hatenablog.com/entry/2022/09/22/000000
2つの異なるコンテナを定義し、その中で同一の「コンポーネントA」を使用している
コンテナのサイズによって、コンポーネントAのスタイルが変わっているのがわかる
どちらも同じviewport sizeなので。
参考
図がわかりやすい
解決する問題の例など
@mediaで指定していると、タブレットでそのstyleを見せることができない場合がある
まあ、できることはわかるmrsekut.icon
そもそも条件分岐を書きたくないという気持ちはある
でもまあコーナーケースでは必要になると思う
その際はmediaqueryより便利だと思う
そもそも使うモチベが低いので調べるのを中断したmrsekut.icon*2
必要になったらまた調べる
入門、ユースケース
2つの登場人物
container側
code:css
/* コンテナの定義 */
main, .sidebar {
container: inline-size;
}
item側
@mediaのノリで使う
code:css
.card {
display: grid;
grid-template:
" image " auto
"content" auto
/ 100% ;
}
@container (width > 400px) {
.card {
grid-template:
"image content" auto
/ auto 1fr ;
}
}
react等ではあまり必要に鳴らなそう？
「親が子のスタイルを決定する」という感じがやりやすい
記述したスタイルよっては、コンテナ要素とコンテナ内の要素が相互に参照しあうおそれもあります。これを回避するため、コンテナを定義した要素にはスタイルの封じ込め（containment）が行われます。封じ込めは、定義した要素の外に影響を及ぼさないと宣言することで、ブラウザにレンダリングの最適化余地を与える機能です。
gpt-5.icon
🧱 使い方の流れ
1. コンテナを宣言する
まず、親要素に container-type を指定します。
code:css
.card-list {
container-type: inline-size; /* 横幅に応じて判定 */
container-name: cards; /* （任意）名前をつけられる */
}
💡 inline-size は要素の横方向サイズ（width）に反応します。
2. クエリを書く
次に、子要素に対して @container ルールで条件を指定します。
code:css
@container (min-width: 600px) {
.card {
flex-direction: row;
}
}
もしくは名前付きの場合：
code:css
@container cards (min-width: 600px) {
.card {
flex-direction: row;
}
}
📐 例：レスポンシブカードレイアウト
code:html
<div class="card-list">
<div class="card">
<img src="..." />
<p>説明文...</p>
</div>
</div>
code:css
.card-list {
display: grid;
gap: 1rem;
container-type: inline-size;
}
.card {
display: flex;
flex-direction: column;
}
/* コンテナの幅が500px以上のとき、横並びに */
@container (min-width: 500px) {
.card {
flex-direction: row;
}
}
⚙️ コンテナの種類
table:_
値 対応する寸法 説明
inline-size 横幅 一般的な使い方。幅に応じて反応
size 幅と高さ 両方に反応（やや重い）
normal 無効 コンテナとして扱わない
🧠 注意点・補足
1. コンテナは入れ子にできる
子コンテナでも独立して判定されます。
2. コンテナは layout を持つ必要がある
たとえば display: block や display: grid など。
display: contents のようにボックスを生成しないものは不可です。
3. ネストされたコンポーネント設計に最適
画面幅に依存せず、親のレイアウト内で最適化できます。
🚀 応用：複数条件やスタイル範囲指定
code:css
@container (min-width: 400px) and (max-width: 800px) {
.card {
font-size: 1.2rem;
}
}
また、CSS変数と組み合わせることで柔軟なテーマ対応も可能です。